<template>
    <div class="headerBox">
            <img :src="ele?.face" />
    </div>
    <div class="contentBox" :style="theme">

        <span>{{ ele?.uname }}</span>
        <span>{{ ele?.title }}</span>
        <template v-if="ele?.pub_time">
            <span>{{ ele?.pub_time }}</span>
        </template>
        <template v-else>
            <span class="liveLable"><img src="../../../assets/gif/live.gif" />直播中</span>
        </template>

    </div>
    <div class="imgBox">
        <img :src="ele?.pic" />
    </div>
</template>

<script lang="ts" setup>
import { onMounted,ref,Ref } from 'vue'
import { getThemes,resType } from '@/hooks/theme'
import { useRouter } from 'vue-router'
interface item{
    pic?:string,
    pub_time:string,    //距离现在多久了
    title:string,
    uname?:string,    
    face:string,    
} 
interface Props{
    item:{
        author:{
            face:string,
            mid:number,
            name:string,    //直播内容的作者
        },
        cover:string,
        pub_time:string,    //距离现在多久了
        title:string,    
        face:string,       //直播内容的作者头像
    }
}
const props = defineProps<Props>()
let ele = ref<item>()
const router = useRouter()
let theme: Ref<resType> = ref(getThemes(router.currentRoute.value.name as string))
onMounted(() => {
    if (props.item.author) {
        let { author:{ face }, author:{ name: uname }, title, pub_time, cover: pic } = props.item
        ele.value = {face, uname, title, pub_time,pic } 
    } else {
        ele.value = { ...props.item }
    }
})
</script>

<style lang="scss" scoped>
$sysPopoverBackground: var(--backgroundColor);
$sysPopoverLableColor: var(--lableColor);
$sysPopoverTitleColor: var(--titleColor);
$sysPopoverHoverLableColor: var(--hoverLableColor);
.headerBox{
    width: 13%;
    height: 100%;
    & img{
        width: 100%;
        height: 45%;
        border-radius: 50%;
    }
}
.contentBox{
    padding: 2px 10px;
    box-sizing: border-box;
    width: 57%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    & span:nth-child(1){
        color: $sysPopoverLableColor;
        font-size: 13px;
    }   
    & span:nth-child(2){
        margin-top: 5px;
        color: $sysPopoverTitleColor;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    & span:nth-child(3){
        margin-top: 5px;
        color: $sysPopoverLableColor;
        font-size: 12px;
    }                                                                                                                              
}
.liveLable{
    width: 65px;
    border-radius: 2px;
    border: 1px solid #fd79a8;
    white-space: nowrap;
    border-radius: 4px;
    color: #fd79a8 !important;
    @include flexRowCenter;
    & img{
        width: 13px;
        height: 13px;
        margin-right: 3px;
    }
}
.imgBox{
    width: 30%;
    @include flexRowCenter;
    & img{
        width: 100%;
        height: 60%;
        border-radius: 4px;

    }
}
</style>